<template>
    <div :style="carStyle">
        <div v-if="!showContent" class="defaultText">请在右侧配置数据</div>
        <template v-else>
            <div class="lineTitle" v-if="obj.isShowTitle" :style="titleStyle">{{ obj.title }}</div>
        </template>
        <div class="chart" ref="constat" :style="canvasStyle" @click="gotoUrl(obj)"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
// import { oneLoad, boardOneLoad } from '@/api/share'

export default {
    Name: "Progress",
    components: {
        echarts
    },
    props: {
        obj: Object,
        discount: Number,
        isReload: {
            type: Boolean,
            default: false
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
        gotoUrl: Function,
        getTableValue: Function,
    },
    data() {
        return {
            showContent: false,
            carStyle: {},
            titleStyle: {},
            canvasStyle: {
                width: "100%",
                height: "100%"
            },
            chart: undefined,
            // 用于比对数据是否修改
            dataStr: "",
            timer: null,
            filterForm: {}
        }
    },
    mounted() {
        this.setStyle();

        this.$nextTick(function () {
            this.reloadInfo();
        })

        this.dataStr = JSON.stringify(this.obj.tableData);

        var self = this;
        window.addEventListener('resize', function () {
            if (self.chart) {
                self.chart.resize();
            }
        }, true);
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
        clearInterval(this.timer)
    },
    methods: {
        reloadInfo() {
            if (this.chart) {
                this.chart.dispose()
            }
            var constat = this.$refs.constat;
            this.chart = echarts.init(constat);

            var timeSize = 60;
            if (this.obj.tableData.reloadTime) {
                timeSize = this.obj.tableData.reloadTime;
            }

            if (this.obj.tableData.type == 1) {
                // 刷新时间兼容处理
                if (timeSize < 60) {
                    timeSize = 60;
                }
            }

            clearInterval(this.timer);
            this.getFirstData();

            if (this.isReload) {
                this.timer = setInterval(() => {
                    this.getLineData();
                }, timeSize * 1000);
            }
        },
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";
            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                fontSize: style.fontSize + "px",
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
            }

            // #region 新的背景颜色

            if (this.obj.style.bgcolorType == "image") {
                this.carStyle.backgroundImage = backgroundImage;
            } else if (this.obj.style.bgcolorType == "gradient") {
                if (this.obj.style.gradient.isRadial) {
                    this.carStyle.backgroundImage = `radial-gradient(${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                } else {
                    this.carStyle.backgroundImage = `linear-gradient(${this.obj.style.gradient.fontAngle}deg, ${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                }
            } else {
                this.carStyle.backgroundColor = backgroundColor;
            }

            // #endregion

            this.titleStyle = {
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
            }

            // 标题隐藏显示
            var isShowTitle = this.obj.isShowTitle ? true : false;
            var echarHeight = style.height;
            var echarMarginTop = 0;
            if (isShowTitle) {
                echarHeight = style.height - style.fontSize - style.borderWidth * 2;
                echarMarginTop = style.fontSize + "px";
            }

            this.canvasStyle = {
                marginTop: echarMarginTop,
                width: "100%",
                height: echarHeight + "px",
            }

            if (this.chart) {
                this.chart.resize({
                    width: style.width,
                    height: echarHeight,
                });
            }
        },
        setOptions(text, data) {
            var textStyle = {
                fontSize: '52px', //文本字号,
                color: "#fff",
                fontWeight: '',
                fontStyle: ''
            }
            if (this.obj.tableData.fontSize) {
                textStyle.fontSize = this.obj.tableData.fontSize + "px";
            }
            if (this.obj.tableData.fontColor) {
                textStyle.color = this.obj.tableData.fontColor;
            }
            if (this.obj.tableData.fontWeight) {
                textStyle.fontWeight = this.obj.tableData.fontWeight;
            }
            if (this.obj.tableData.fontStyle) {
                textStyle.fontStyle = this.obj.tableData.fontStyle;
            }

            var position = "";
            // if (data >= 50) {
            //     position = 'inside';
            // } else if (data < 50) {
            //     position = 'right';
            // }

            var option = {
                // title: {
                //     text: "进度条",
                //     show: false,
                // },
                animationDuration: 2000,
                grid: {
                    top: 'center',
                    left: '2%',
                    right: '80px',
                    height: '25px',
                    containLabel: false
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        show: false,
                    },
                    max: 100,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                },
                yAxis: [{
                    type: 'category',
                    data: [],
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    z: 10
                }, {
                    type: 'category',
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    data: [],
                }],
                series: [{
                    name: '',
                    type: 'bar',
                    barWidth: '100%',
                    // barMaxWidth: '100%',
                    label: {
                        normal: {
                            show: true,
                            position: position,
                            formatter: data,
                            textStyle: textStyle
                        }
                    },
                    itemStyle: {
                        normal: {
                            barBorderRadius: 5,
                            shadowBlur: 10,
                            shadowColor: '#111',
                            color: this.obj.tableData.valueColor
                        }
                    },
                    data: [text],
                    z: 10
                }, {
                    type: 'bar',
                    barWidth: '100%',
                    yAxisIndex: 1,
                    silent: true,
                    // barMaxWidth: '100%',
                    itemStyle: {
                        normal: {
                            barBorderRadius: 5,
                            color: this.obj.tableData.rateBackageColor
                        }
                    },
                    label: {
                        show: true,
                        position: 'right',
                        formatter: text + "%",
                        // color: '#60acfc',
                        color: textStyle.color,
                        fontSize: textStyle.fontSize,
                    },
                    data: [100],
                }]
            };
            this.chart.setOption(option)
            return false;

            this.chart.setOption({
                grid: {
                    left: '4%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true,
                },
                xAxis: {
                    show: false, //不显示x轴相关信息
                },
                yAxis: [
                    {
                        show: false,
                        type: 'category',
                        data: ['html5'],
                        axisTick: { show: false }, //不显示刻度线
                        axisLabel: {
                            color: '#000',
                        },
                        axisLine: {
                            show: false,
                        },
                    },
                    {
                        show: true,
                        type: 'category',
                        data: [data],
                        axisTick: { show: false }, //不显示刻度线
                        axisLabel: {
                            color: color,
                            formatter: text
                        },
                        axisLine: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: '条',
                        z: 1,
                        yAxisIndex: 0,
                        type: 'bar',
                        data: [data],
                        // 修改第一条柱子的圆角
                        itemStyle: {
                            normal: {
                                barBorderRadius: 0,
                                color: this.obj.tableData.valueColor
                            },
                            // color 可以修改柱子的颜色
                            // color:"orange"
                        },
                        // 柱子之间的间距
                        barCategoryGap: 5,
                        // 柱子之间的宽度
                        barWidth: 20,
                        // 显示柱子内的文字
                        label: {
                            show: true,
                            position: 'inside',
                            formatter: '{c}',
                            color: "#ffffff"
                        },
                    },
                    {
                        name: '框',
                        z: 0,
                        yAxisIndex: 1,
                        type: 'bar',
                        data: [this.obj.tableData.maxNumber],
                        // 柱子之间的间距
                        barCategoryGap: 5,
                        // 柱子之间的宽度
                        barWidth: 20,
                        itemStyle: {
                            color: this.obj.tableData.rateBackageColor, //填充色
                            borderColor: this.obj.tableData.rateBackageColor,
                            borderWidth: 1,
                            barBorderRadius: 0,
                        },
                    },
                ],
            })
        },
        getFirstData() {
            if (this.obj.tableData.tableId && this.obj.tableData.itemId && this.obj.tableData.maxNumber > 0) {
                var result = this.getTableValue(this.obj.tableData.tableId, this.obj.tableData.itemId, 1);
                if (result.code == 200) {
                    this.getLineData();
                } else {
                    var self = this;
                    window.setTimeout(function () {
                        self.getFirstData();
                    }, 500);
                }
            }

            // #region 没有配置数据显示默认内容
            if (!this.obj.tableData.tableId) {
                var maxValue = this.obj.tableData.maxNumber;
                this.showContent = true;
                var value = 60;
                var text = "100%";
                if (maxValue > 0) {
                    text = Math.floor(value / maxValue * 100).toFixed(this.obj.tableData.decimal);
                }
                var data = Number(value).toFixed(this.obj.tableData.decimal);
                this.setOptions(text, data);
                return false;
            }
            // #endregion

            // #region 参数不完整
            if (!this.obj.tableData.itemId || this.obj.tableData.maxNumber <= 0) {
                this.showContent = false;
                return false;
            }
        },
        getLineData() {
            var maxValue = this.obj.tableData.maxNumber;
            this.showContent = true;

            var result = this.getTableValue(this.obj.tableData.tableId, this.obj.tableData.itemId, 1);
            if (result.code == 200) {
                var value = result.data;

                var text = 0;
                var data = Number(value).toFixed(this.obj.tableData.decimal);
                if (maxValue > 0) {
                    if (value != null) {
                        text = Math.floor(value / maxValue * 100).toFixed(this.obj.tableData.decimal);
                    } else {
                        text = Number(0).toFixed(this.obj.tableData.decimal);
                    }
                }
                this.setOptions(text, data);
            }
            return false;

            this.filterForm.tableId = this.obj.tableData.tableId;
            this.filterForm.structureId = this.obj.tableData.itemId;

            if (this.obj.tableData.type != 1) {
                oneLoad(this.filterForm).then((res) => {
                    if (res.data.code == 0) {
                        var value = res.data.data;

                        this.showContent = true;

                        var text = 0;
                        var data = Number(value).toFixed(this.obj.tableData.decimal);
                        if (maxValue > 0) {
                            if (value != null) {
                                text = Math.floor(value / maxValue * 100).toFixed(this.obj.tableData.decimal);
                            } else {
                                text = Number(0).toFixed(this.obj.tableData.decimal);
                            }
                        }
                        this.setOptions(text, data);
                    } else {
                        console.error(res.data.message)
                    }
                }).catch(() => {
                    clearInterval(this.timer)
                });
            } else {
                boardOneLoad(this.filterForm).then((res) => {
                    if (res.data.code == 0) {

                        var value = res.data.data;

                        this.showContent = true;

                        var text = 0;
                        var data = Number(value).toFixed(this.obj.tableData.decimal);
                        if (maxValue > 0) {
                            if (value != null) {
                                text = Math.floor(value / maxValue * 100).toFixed(this.obj.tableData.decimal);
                            } else {
                                text = Number(0).toFixed(this.obj.tableData.decimal);
                            }
                        }
                        this.setOptions(text, data);
                    } else {
                        console.error(res.data.message)
                    }
                }).catch(() => {
                    clearInterval(this.timer)
                });
            }
            // }
        }
    },
    watch: {
        obj: {
            handler(newVal, oldVal) {
                this.setStyle();

                // 数据改变了 动态更新echart
                if (JSON.stringify(this.obj.tableData) != this.dataStr) {
                    this.dataStr = JSON.stringify(this.obj.tableData);

                    this.reloadInfo();
                }
            },
            deep: true,  // 深度监听
        }
    },
}
</script>